<template>
  <div class="app-container paiban">


    <div class="custom_card">
      <div style="display: flex;justify-content: space-between;">
        <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="0px">
          <el-form-item label="" prop="storeName">
            <el-select style="width:200px " filterable remote v-model="queryParams.storeName" clearable
                       placeholder="请选择门店" @change="selectSeries">
              <el-option v-for="store in storeList" :key="store.id" :value="store.name" :label="store.name">{{
                  store.name
                }}
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="" prop="currSeries">
            <el-select style="width:200px " filterable remote v-model="queryParams.currSeries" clearable
                       placeholder="请选择车系" @change="selectModel">
              <el-option v-for="series in seriesList" :key="series.id" :value="series.id" :label="series.name">
                {{ series.name }}
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="" prop="modelId">
            <el-select style="width:200px " filterable remote v-model="queryParams.modelId" clearable
                       placeholder="请选择车型">
              <el-option v-for="model in modelList" :key="model.id" :value="model.id" :label="model.name">{{
                  model.name
                }}
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="" prop="shiftSchedulingStatus">
            <el-select style="width:200px " filterable remote v-model="queryParams.shiftSchedulingStatus" clearable
                       placeholder="请选择排班状态">
              <el-option :value="1" :label="'未排车'">未排车
              </el-option>

              <el-option :value="2" :label="'已排车'">已排车
              </el-option>

            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            <!--            <el-button size="mini" @click="clickFun"><svg-icon :icon-class="isFullFlag?'exit-fullscreen':'fullscreen'"/>&nbsp;&nbsp;{{isFullFlag?"退出全屏":"全屏"}}</el-button>-->
          </el-form-item>
        </el-form>

        <div class="el-radio-box">
          <el-radio-group v-model="queryParams.orderStatusType" @change="handleQuery">
            <el-radio-button label="0">
              <div>全部</div>
            </el-radio-button>
            <el-radio-button label="1">
              <div style="display: flex;">
                <div class="line" style="background:#FF9F24"></div>
                预定
              </div>
            </el-radio-button>
            <el-radio-button label="2">
              <div style="display: flex">
                <div class="line" style="background:#369AFE"></div>
                用车
              </div>
            </el-radio-button>
            <el-radio-button label="3">
              <div style="display: flex">
                <div class="line" style="background:#99B4CD"></div>
                已还车
              </div>
            </el-radio-button>
          </el-radio-group>
        </div>
      </div>

      <div class="noplan">
        未排车预定订单数：{{ unSchedule }}
      </div>

      <div class="barchart">
        <div class="left">
          <el-table :data="tableData" :span-method="objectSpanMethod" border :max-height="leftMaxHeight">
            <el-table-column align="center">
              <template slot="header" slot-scope="scope">
                <div>
                  <el-row>
                    <!--                    <span @click="selectTime">{{ queryParams.startTime }}~{{queryParams.endTime}}</span>-->
                    <el-date-picker
                      class="mSelectTime"
                      v-model="dateVal"
                      :clearable="false"
                      type="daterange"
                      range-separator="~"
                      align="center"
                      size="mini"
                      :picker-options="pickerOptions"
                      @change="changTime(0)"
                      value-format="yyyy-MM-dd"
                      :start-placeholder="queryParams.startTime"
                      :end-placeholder="queryParams.endTime">
                    </el-date-picker>
                  </el-row>
                  <el-row>
                    <el-col :span="8" style="text-align: right;">
                      <el-button type="text"  size="mini" style="padding: 0;color: #00bfbf" @click="changTime(1)">上两周</el-button>
                    </el-col>
                    <el-col :span="8" style="text-align: center;color: #FF9F24">
                      <el-button type="text" size="mini" style="padding: 0;color: #FF9F24" @click="changTime(2)">今天起</el-button>
                    </el-col>
                    <el-col :span="8" style="text-align: left;color: #369AFE">
                      <el-button type="text" size="mini" style="padding: 0;color: #00bfbf" @click="changTime(3)">下两周</el-button>
                    </el-col>
                  </el-row>
                </div>
              </template>
              <el-table-column align="center" label="车辆级别" min-width="120"
                               show-overflow-tooltip>
                <template v-slot="scope">
                  <div>{{ scope.row.orderlist[0].schedulingName }}</div>
                  <div @click="dialogParam.operatingClassification = scope.row.orderlist[0].schedulingOC;showStorage=true" style="margin-top: -5px">
                    订单所需车辆:{{ scope.row.orderlist[0].carDemandsQuantity }} 库存:{{ scope.row.orderlist[0].carQuantity }}
                    <i class="el-icon-search" style="color: #5473E8"></i>
                  </div>
                </template>

              </el-table-column>
              <!--                不写这个空列，合并单元格会失效-->
              <el-table-column width="1" min-width="1">
              </el-table-column>
            </el-table-column>
          </el-table>
        </div>
        <div class="right">
          <el-table :data="tableData" v-loading="loading" :max-height="rightMaxHeight">
            <el-table-column v-for="(it, index1) in showMonths" :label="it.str" prop="str"
                             style="padding: 0; margin: 0;" align="center" :key="it.str">
              <el-table-column v-for="(itm, index2) in it.daysArr" :label="itm.day" prop="day" min-width="45"
                               style="padding: 0; margin: 0;" align="center" :key="itm.timestamp"
                               :label-class-name="isRestDay(itm)?'label-class':''">
                <!--                               :label-class-name="(itm.week.indexOf('六')>0||itm.week.indexOf('日')>0)?'label-class':''">-->
                <template slot="header" slot-scope="scope">
                  <el-row>{{ itm.day }}</el-row>
                  {{ itm.week }}
                  <el-row v-if="itm.holidayRes.isHoliday">{{
                      itm.holidayRes.isHoliday ? itm.holidayRes.name : ''
                    }}
                  </el-row>

                </template>
                <template slot-scope="scope" class="progressCon">
                  <el-popover :close-delay="0" placement="top-start" width="500" trigger="hover"
                              v-if="getShowType(itm.timestamp,scope.row)===1">
                    <el-row>
                      <el-col :span="6">{{ scope.row[itm.timestamp][0].rentalTypeName }}
                      </el-col>
                      <el-col :span="10">{{
                          1 === scope.row[itm.timestamp][0].orderStatusType ? '预取:' : '实取:'
                        }}{{
                          1 === scope.row[itm.timestamp][0].orderStatusType ? scope.row[itm.timestamp][0].rentalStartTime : scope.row[itm.timestamp][0].actualStartTime
                        }}
                      </el-col>
                      <el-col :span="8">
                        {{
                          1 === scope.row[itm.timestamp][0].orderStatusType ? scope.row[itm.timestamp][0].reserveTakeStoreName : scope.row[itm.timestamp][0].takeStoreName
                        }}
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="6">{{ scope.row[itm.timestamp][0].rentalTypeName }}
                      </el-col>
                      <el-col :span="10">{{
                          1 === scope.row[itm.timestamp][0].orderStatusType ? '预还:' : '实还:'
                        }}{{
                          1 === scope.row[itm.timestamp][0].orderStatusType ? scope.row[itm.timestamp][0].rentalEndTime : scope.row[itm.timestamp][0].actualEndTime
                        }}
                      </el-col>
                      <el-col :span="8">
                        {{
                          1 === scope.row[itm.timestamp][0].orderStatusType ? scope.row[itm.timestamp][0].reserveAlsoStoreName : scope.row[itm.timestamp][0].alsoStoreName
                        }}
                      </el-col>
                    </el-row>

                    <el-row>
                      <el-col :span="24">
                        预定车型:{{scope.row[itm.timestamp][0].modelName}}
                      </el-col>
                    </el-row>
                    <el-row v-if="1 !== scope.row[itm.timestamp][0].orderStatusType">
                      <el-col :span="24">
                        实际车型:{{scope.row[itm.timestamp][0].actualModelName}}
                      </el-col>
                    </el-row>

                    <el-divider></el-divider>
                    <el-row>
                      <el-col :span="16"> 客户姓名: {{
                          scope.row[itm.timestamp][0].memberName
                        }}/{{ scope.row[itm.timestamp][0].contactPhone }}
                      </el-col>
                      <el-col :span="8" v-if="scope.row[itm.timestamp][0].memberLabelClassifyName">
                        <div class="member-label">
                          <span>{{ scope.row[itm.timestamp][0].memberLabelClassifyName }}</span></div>
                      </el-col>
                    </el-row>
                    <el-row v-if="scope.row[itm.timestamp][0].carNo">
                      <el-col :span="24">
                        车辆:{{ scope.row[itm.timestamp][0].carNo }}
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="24"> 订单来源:
                        {{ scope.row[itm.timestamp][0].orderSourceName }}
                      </el-col>

                    </el-row>
                    <el-row>
                      <el-col :span="16">订单编号: {{ scope.row[itm.timestamp][0].orderNo }}</el-col>
                      <el-col :span="8" v-if="scope.row[itm.timestamp][0].orderStatusTypeName">
                        <div class="member-label" :class="'ordertext'+scope.row[itm.timestamp][0].orderStatusType">
                          {{ scope.row[itm.timestamp][0].orderStatusTypeName }}
                        </div>
                      </el-col>
                    </el-row>
                    <el-button slot="reference" :class="'orderstate'+scope.row[itm.timestamp][0].orderStatusType"
                               style="width:calc(100% + 2px)"></el-button>
                  </el-popover>

                  <div style="display: flex;align-items: center" v-else-if="getShowType(itm.timestamp,scope.row)===2">

                    <div style="flex: 1;width: 0">
                      <el-popover :close-delay="0" placement="top-start" width="500" trigger="hover">
                        <el-row>
                          <el-col :span="6">{{ scope.row[itm.timestamp][0].rentalTypeName }}
                          </el-col>
                          <el-col :span="10">{{
                              1 === scope.row[itm.timestamp][0].orderStatusType ? '预取:' : '实取:'
                            }}{{
                              1 === scope.row[itm.timestamp][0].orderStatusType ? scope.row[itm.timestamp][0].rentalStartTime : scope.row[itm.timestamp][0].actualStartTime
                            }}
                          </el-col>
                          <el-col :span="8">
                            {{
                              1 === scope.row[itm.timestamp][0].orderStatusType ? scope.row[itm.timestamp][0].reserveTakeStoreName : scope.row[itm.timestamp][0].takeStoreName
                            }}
                          </el-col>
                        </el-row>
                        <el-row>
                          <el-col :span="6">{{ scope.row[itm.timestamp][0].rentalTypeName }}
                          </el-col>
                          <el-col :span="10">{{
                              1 === scope.row[itm.timestamp][0].orderStatusType ? '预还:' : '实还:'
                            }}{{
                              1 === scope.row[itm.timestamp][0].orderStatusType ? scope.row[itm.timestamp][0].rentalEndTime : scope.row[itm.timestamp][0].actualEndTime
                            }}
                          </el-col>
                          <el-col :span="8">
                            {{
                              1 === scope.row[itm.timestamp][0].orderStatusType ? scope.row[itm.timestamp][0].reserveAlsoStoreName : scope.row[itm.timestamp][0].alsoStoreName
                            }}
                          </el-col>
                        </el-row>

                        <el-row>
                          <el-col :span="24">
                            预定车型:{{scope.row[itm.timestamp][0].modelName}}
                          </el-col>
                        </el-row>

                        <el-row v-if="1 !== scope.row[itm.timestamp][0].orderStatusType">
                          <el-col :span="24">
                            实际车型:{{scope.row[itm.timestamp][0].actualModelName}}
                          </el-col>
                        </el-row>

                        <el-divider></el-divider>
                        <el-row>
                          <el-col :span="16"> 客户姓名: {{
                              scope.row[itm.timestamp][0].memberName
                            }}/{{ scope.row[itm.timestamp][0].contactPhone }}
                          </el-col>
                          <el-col :span="8" v-if="scope.row[itm.timestamp][0].memberLabelClassifyName">
                            <div class="member-label">
                              <span>{{ scope.row[itm.timestamp][0].memberLabelClassifyName }}</span></div>
                          </el-col>
                        </el-row>
                        <el-row v-if="scope.row[itm.timestamp][0].carNo">
                          <el-col :span="24">
                            车辆:{{ scope.row[itm.timestamp][0].carNo }}
                          </el-col>
                        </el-row>
                        <el-row>
                          <el-col :span="24"> 订单来源:
                            {{ scope.row[itm.timestamp][0].orderSourceName }}
                          </el-col>

                        </el-row>
                        <el-row>
                          <el-col :span="16">订单编号: {{ scope.row[itm.timestamp][0].orderNo }}</el-col>
                          <el-col :span="8" v-if="scope.row[itm.timestamp][0].orderStatusTypeName">
                            <div class="member-label" :class="'ordertext'+scope.row[itm.timestamp][0].orderStatusType">
                              {{ scope.row[itm.timestamp][0].orderStatusTypeName }}
                            </div>
                          </el-col>
                        </el-row>
                        <el-button slot="reference" :class="'orderstate'+scope.row[itm.timestamp][0].orderStatusType"
                                   style="width:calc(100% + 2px)"></el-button>
                      </el-popover>
                    </div>
                    <div style="flex: 1;width: 0">

                      <el-popover :close-delay="0" placement="top-start" width="500" trigger="hover">
                        <el-row>
                          <el-col :span="6">{{ scope.row[itm.timestamp][1].rentalTypeName }}
                          </el-col>
                          <el-col :span="10">{{
                              1 === scope.row[itm.timestamp][1].orderStatusType ? '预取:' : '实取:'
                            }}{{
                              1 === scope.row[itm.timestamp][1].orderStatusType ? scope.row[itm.timestamp][1].rentalStartTime : scope.row[itm.timestamp][1].actualStartTime
                            }}
                          </el-col>
                          <el-col :span="8">
                            {{
                              1 === scope.row[itm.timestamp][1].orderStatusType ? scope.row[itm.timestamp][1].reserveTakeStoreName : scope.row[itm.timestamp][1].takeStoreName
                            }}
                          </el-col>
                        </el-row>
                        <el-row>
                          <el-col :span="6">{{ scope.row[itm.timestamp][1].rentalTypeName }}
                          </el-col>
                          <el-col :span="10">{{
                              1 === scope.row[itm.timestamp][1].orderStatusType ? '预还:' : '实还:'
                            }}{{
                              1 === scope.row[itm.timestamp][1].orderStatusType ? scope.row[itm.timestamp][1].rentalEndTime : scope.row[itm.timestamp][1].actualEndTime
                            }}
                          </el-col>
                          <el-col :span="8">
                            {{
                              1 === scope.row[itm.timestamp][1].orderStatusType ? scope.row[itm.timestamp][1].reserveAlsoStoreName : scope.row[itm.timestamp][1].alsoStoreName
                            }}
                          </el-col>
                        </el-row>

                        <el-row>
                          <el-col :span="24">
                            预定车型:{{scope.row[itm.timestamp][1].modelName}}
                          </el-col>
                        </el-row>

                        <el-row v-if="1 !== scope.row[itm.timestamp][1].orderStatusType">
                          <el-col :span="24">
                            实际车型:{{scope.row[itm.timestamp][1].actualModelName}}
                          </el-col>
                        </el-row>

                        <el-divider></el-divider>
                        <el-row>
                          <el-col :span="16"> 客户姓名: {{
                              scope.row[itm.timestamp][1].memberName
                            }}/{{ scope.row[itm.timestamp][1].contactPhone }}
                          </el-col>
                          <el-col :span="8" v-if="scope.row[itm.timestamp][1].memberLabelClassifyName">
                            <div class="member-label">
                              <span>{{ scope.row[itm.timestamp][1].memberLabelClassifyName }}</span></div>
                          </el-col>
                        </el-row>
                        <el-row v-if="scope.row[itm.timestamp][1].carNo">
                          <el-col :span="24">
                            车辆:{{ scope.row[itm.timestamp][1].carNo }}
                          </el-col>
                        </el-row>
                        <el-row>
                          <el-col :span="24"> 订单来源:
                            {{ scope.row[itm.timestamp][1].orderSourceName }}
                          </el-col>

                        </el-row>
                        <el-row>
                          <el-col :span="16">订单编号: {{ scope.row[itm.timestamp][1].orderNo }}</el-col>
                          <el-col :span="8" v-if="scope.row[itm.timestamp][1].orderStatusTypeName">
                            <div class="member-label" :class="'ordertext'+scope.row[itm.timestamp][1].orderStatusType">
                              {{ scope.row[itm.timestamp][1].orderStatusTypeName }}
                            </div>
                          </el-col>
                        </el-row>
                        <el-button slot="reference" :class="'orderstate'+scope.row[itm.timestamp][1].orderStatusType"
                                   style="width:calc(100% + 2px)"></el-button>
                      </el-popover>

                    </div>
                  </div>

                  <el-button v-else slot="reference" class="free" style="width:calc(100% + 2px)"></el-button>

                </template>
              </el-table-column>
            </el-table-column>
          </el-table>
        </div>
      </div>

      <el-dialog title="车辆库存及订单展示" width="1000px" append-to-body destroy-on-close :visible.sync="showStorage">
        <CarStorage
          v-if="showStorage"
          :query-params="dialogParam"
          @cancel="showStorage=false"
        ></CarStorage>
      </el-dialog>

      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>

  </div>
</template>

<script>
import {tenantStoreList, selectSeries, selectModel, chedulinglist, statisticsinfo} from '@/api/index';
import Festival from '@/components/festival_chn'
import CarStorage from './components/carstorage'

const festival = new Festival()

export default {
  name: "carlevelschedule",
  dicts: ['sys_order_source', 'sys_order_status'],
  components: {CarStorage},
  data() {
    return {
      flag: false,
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      showSearch: true,
      dialogParam:{},
      // 总条数
      total: 0,
      storeList: [],
      seriesList: [],
      modelList: [],


      leftMaxHeight: 800,
      rightMaxHeight: 800,
      carNum: {},
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        dataType: 1,//1.按车辆级别查数据 2.按车型查数据
        // type: 0,
        orderStatusType: null,
        // currUserStore: null,
        storeName: null,
        currSeries: null,
        // currModel: null,
        modelId: null,
        startTime: null,
        endTime: null,
        shiftSchedulingStatus: null
      },

      showMonths: [],
      tableData: [],
      minDay: "", // 最小日期
      maxDay: "", // 最大日期
      rendering: true,// 遮罩层
      isFullFlag: false,
      dateVal: [],
      selMin: '',
      pickerOptions: {
        onPick: ({maxDate, minDate}) => {
          // console.log('date==>', date)
          console.log('max==>', maxDate)
          console.log('min==>', minDate)
          //切换时间时最少可选14天，最多可选90天

          this.selMin = minDate && minDate.getTime()

          if (maxDate) {
            this.selMin = ''
          }
        },

        disabledDate: time => {

          if (this.selMin !== '') {
            return time.getTime() > this.selMin + 90 * 24 * 60 * 60 * 1000
              || time.getTime() < this.selMin - 90 * 24 * 60 * 60 * 1000
              || (this.selMin - 13 * 24 * 60 * 60 * 1000 < time.getTime() && time.getTime() < this.selMin + 13 * 24 * 60 * 60 * 1000)
          }
        }

      },
      showStorage: false,
      unSchedule: 0
    };
  },
  watch:{
    queryParams:{
      handler:function(oldval, val){
        this.dialogParam.dataType = val.dataType
        this.dialogParam.storeName = val.storeName
        this.dialogParam.startTime = val.startTime
        this.dialogParam.endTime = val.endTime
        this.dialogParam.shiftSchedulingStatus = val.shiftSchedulingStatus
        this.dialogParam.orderStatusType = val.orderStatusType

        console.log('dialogParam==', this.dialogParam)
      },
      deep:true
    }
  },
  created() {
    this.tenantStoreList();
    if (!this.queryParams.startTime) {
      //默认展示三天前开始，14天的时间段
      this.queryParams.startTime = this.parseTime(new Date().getTime() - 3 * 24 * 60 * 60 * 1000, '{y}-{m}-{d}')
      this.queryParams.endTime = this.parseTime(new Date().getTime() + 10 * 24 * 60 * 60 * 1000, '{y}-{m}-{d}')
    }
    this.getList();
    this.getChartTitle() // 渲染的信息
    this.$nextTick(() => {
      this.calcHeight()
      var box = document.querySelector('.left .el-table__body-wrapper');
      box.addEventListener('scroll', this.leftHandleScroll);
      var box2 = document.querySelector('.right .el-table__body-wrapper');

      box2.addEventListener('scroll', this.rightHandleScroll);
    })

    // 设置左边表格的宽度
    this.$nextTick(() => {
      let height = 0
      let setHeight = setInterval(() => {
        if (height !== 0) {
          clearInterval(setHeight)
        } else {
          if (document.querySelector('.right .el-table__header-wrapper')) {
            height = document.querySelector('.right .el-table__header-wrapper').offsetHeight
            document.querySelector('.left .el-table__header th').setAttribute('style', 'height: ' + (height - 30) + 'px !important')
            setTimeout(() => {
              this.rendering = false
            }, 100)
          }
        }
      }, 50)
    })
    // 窗口大小变化时，需要重算
    // window.addEventListener('resize', this.calcHeight, false)
    window.addEventListener("fullscreenchange", this.calcHeight(), false)

  },
  methods: {
    calcHeight() {
      var col = document.getElementsByName("gutter")[0]
      if (col) {
        col.remove()
      }
      let height = 56;
      let searchBox = document.querySelector('.paiban .custom_card_0');
      if (searchBox && searchBox.offsetHeight > 0) {
        height = searchBox.offsetHeight
      }
      let maxHeight = document.body.offsetHeight - height - 100
      if (!this.isFullFlag) {
        maxHeight = maxHeight - 205
      }
      setTimeout(() => {

        var box2 = document.querySelector('.right .el-table__body-wrapper');
        console.log('box2=scrollWidth>', box2.scrollWidth)
        console.log('box2=clientWidth>', box2.clientWidth)


        // let leftScrolling = document.querySelector('.left  .is-scrolling-none');
        // let leftBodyBox = document.querySelector('.left  .el-table__body-wrapper');
        // if(leftScrolling||leftBodyBox.offsetWidth===0){
        //   this.leftMaxHeight=maxHeight-16
        // }else{
        //   this.leftMaxHeight=maxHeight
        // }

        //29个会产生滑动
        if (box2.scrollWidth > box2.clientWidth) {
          this.leftMaxHeight = maxHeight - 16
        } else {
          this.leftMaxHeight = maxHeight
        }

        this.rightMaxHeight = maxHeight

      }, 100)
    },
    // 左右滚动条滚动同步
    leftHandleScroll() {
      var leftTable = document.querySelector('.left .el-table__body-wrapper');
      var rightTable = document.querySelector('.right .el-table__body-wrapper');
      rightTable.scrollTop = leftTable.scrollTop

    },
    rightHandleScroll() {
      var leftTable = document.querySelector('.left .el-table__body-wrapper');
      var rightTable = document.querySelector('.right .el-table__body-wrapper');
      leftTable.scrollTop = rightTable.scrollTop

    },
    clickFun() {
      this.isFullFlag = !this.isFullFlag
      const element = document.querySelector('.paiban');//指定全屏区域元素
      if (this.isFullFlag) {
        element.requestFullscreen()
      } else {
        document.exitFullscreen();
      }
    },

    tenantStoreList() {
      tenantStoreList().then(res => {
        this.storeList = res.data
      })
    },
    selectSeries() {
      this.queryParams.currSeries = null;
      this.queryParams.modelId = null;
      selectSeries({storeId: this.queryParams.storeName}).then(res => {
        this.seriesList = res.data
      })
    },
    selectModel() {
      // this.queryParams.modelId = null;
      // selectModel({storeId: this.queryParams.storeName, seriesId: this.queryParams.currSeries}).then(res => {
      //   this.modelList = res.data
      // })
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },

    //是否休息日（法定假日+正常周末）
    isRestDay(item) {
      // const timestr =  this.parseTime(new Date(item.timestamp), '{y}{m}{d}')
      //
      // // console.log('日期item=>', timestr)
      // const res = festival.day(Number(timestr))
      // console.log('节假日res===>', res)

      if (item.holidayRes.isHoliday) {
        return true
      } else {
        if ((item.week.indexOf('六') > 0 || item.week.indexOf('日') > 0)) {
          //周六周日是调休要上班，其余休假
          return !item.holidayRes.isSwap
        } else {
          return false
        }
      }

    },

    //是否法定假日
    // isHoliday(item){
    // const time = new Date(this.parseTime(new Date(timeStamp), '{y}-{m}-{d} 00:00:00')).getTime();
    // const timestr =  this.parseTime(new Date(item.timestamp), '{y}{m}{d}')
    //
    // // console.log('日期item=>', timestr)
    // const res = festival.day(Number(timestr))
    // console.log('节假日res===>', res)
    //   return item.holidayRes.isHoliday
    // },

    //法定假日名称
    holidayStr(item) {
      // const timestr =  this.parseTime(new Date(item.timestamp), '{y}{m}{d}')
      //
      // // console.log('日期item=>', timestr)
      // const res = festival.day(Number(timestr))
      // console.log('节假日res===>', res)
      if (item.holidayRes.isHoliday) {
        return item.holidayRes.name
      } else {
        return ''
      }
    },


    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 查询VIEW列表 */
    getList() {
      let _this = this
      this.loading = true;
      chedulinglist(this.queryParams).then(response => {
        _this.tableData = response.data.data;
        _this.total = response.data.total;

        _this.tableData = []

        for (const item of response.data.data) {

          //假数据，到时候删掉
          // item.push({
          //   "orderNo": "O29202302071937560001",
          //   "orderType": 1,
          //   "orderTypeName": "预租订单222",
          //   "memberNo": "M16692758848505265",
          //   "memberName": "蓝精灵公司222",
          //   "memberLabelClassify": 8,
          //   "memberLabelClassifyName": "新客户",
          //   "contactPhone": "15212126252",
          //   "modelId": "45917",
          //   "modelName": "特斯拉 Model 32020款 标准续航后驱升级版",
          //   "actualModelId": "45917",
          //   "actualModelName": "特斯拉 Model 32020款 标准续航后驱升级版",
          //   "carId": null,
          //   "carNo": null,
          //   "tenantId": 29,
          //   "isVehicleServicing": 2,
          //   "vehicleServicingDuration": 0,
          //   "rentalStartTime": "2023-02-17 00:00:00",
          //   "rentalEndTime": "2023-02-25 00:00:00",
          //   "actualStartTime": null,
          //   "actualEndTime": null,
          //   "reserveTakeStoreName": "一号车库宝安店",
          //   "takeStoreName": "一号车库宝安店",
          //   "reserveAlsoStoreName": "一号车库宝安店",
          //   "alsoStoreName": "一号车库宝安店",
          //   "rentalType": 1,
          //   "rentalTypeName": "到店取还车",
          //   "orderSource": 2,
          //   "orderSourceName": "后台代客下单",
          //   "orderStatus": 0,
          //   "orderStatusType": null,
          //   "orderStatusTypeName": "预定订单",
          //   "shiftSchedulingStatus": null,
          //   "shiftSchedulingStatusName": "预定订单",
          //   "schedulingModelId": "45917",
          //   "schedulingModelName": "特斯拉 Model 32020款 标准续航后驱升级版",
          //   "schedulingStartTime": "2023-02-13 00:00:00",
          //   "schedulingEndTime": "2023-02-17 05:00:00",
          //   "servicingEndTime": "2023-02-25 00:00:00",
          //   "schedulingOC": null,
          //   "schedulingOCName": null,
          //   "schedulingTakeStoreName": "一号车库宝安店",
          //   "schedulingAlsoStoreName": "一号车库宝安店222",
          //   "schedulingId": "45917",
          //   "schedulingName": "特斯拉Model 32020款 标准续航后驱升级版",
          //   "carQuantity": 2,
          //   "carDemandsQuantity": 1
          // })
          for (const itemElement of item) {
            itemElement.orderStatusType =
              {
                '预定订单': 1,
                '用车订单': 2,
                '已还车订单': 3,
              }[itemElement.orderStatusTypeName]
          }


          _this.tableData.push({
            orderlist: item,
            schedulingOC: item[0].schedulingOC,
            schedulingModelId: item[0].schedulingModelId
          })
        }

        console.log('_this.tableData', _this.tableData)

        _this.setrowspans() // 设置合并
        _this.loading = false;
      }).catch(e => {
        _this.loading = false;
        _this.tableData = []
      });

      statisticsinfo(this.queryParams).then(res => {
        this.unSchedule = res.data.unscheduledQuantity
      }).catch(e => {
        this.unSchedule = 0
      });

    },
    getShowType(timeStamp, row) {
      const time = new Date(this.parseTime(new Date(timeStamp), '{y}-{m}-{d} 00:00:00')).getTime();

      row[timeStamp] = []

      for (const item of row.orderlist) {
        let startTime = new Date(item.schedulingStartTime).getTime();
        let endTime = new Date(item.schedulingEndTime).getTime() || new Date(this.queryParams.endTime).getTime();

        let startZeroTime = new Date(this.parseTime(item.schedulingStartTime, '{y}-{m}-{d} 00:00:00')).getTime();
        if (startZeroTime === time || (startTime <= time && time < endTime)) {
          row[timeStamp].push(item)
        }
      }

      if (row[timeStamp].length > 1) {
        //按开始时间排序，否则折叠情况可能出现异常
        row[timeStamp] = this.bubbleSort(row[timeStamp])

      }

      if (row[timeStamp].length <= 0) {
        return 0
      } else if (row[timeStamp].length < 2) {
        return 1
      } else {
        console.log('出现重叠数据了', row[timeStamp])
        return 2
      }

    },

    bubbleSort(array) {
      const len = array.length
      if (len < 2) return array
      for (let i = 0; i < len; i++) {
        for (let j = 0; j < i; j++) {

          const t1 = new Date(array[j].schedulingStartTime).getTime()
          const t2 = new Date(array[i].schedulingStartTime).getTime()

          if (t1 > t2) {
            const temp = array[j]
            array[j] = array[i]
            array[i] = temp
          }
        }
      }
      return array
    },

    //获得数据相同的行数
    objectSpanMethod({row, column, rowIndex, columnIndex}) {

      if (columnIndex === 0) {
        return {
          rowspan: row.rowspan,
          colspan: 1
        };
      }
    },
    setrowspans() {
      // 先给所有的数据都加一个v.rowspan = 1
      this.tableData.forEach(v => {
        v.rowspan = 1;
      });
      // 双层循环
      for (let i = 0; i < this.tableData.length; i++) {
        // 内层循环，上面已经给所有的行都加了v.rowspan = 1
        // 这里进行判断
        // 如果当前行的id和下一行的id相等
        // 就把当前v.rowspan + 1
        // 下一行的v.rowspan - 1
        for (let j = i + 1; j < this.tableData.length; j++) {
          //此处可根据相同字段进行合并，此处是根据的id
          if (this.tableData[i].schedulingOC == this.tableData[j].schedulingOC) {
            this.tableData[i].rowspan++;
            this.tableData[j].rowspan--;
          }
        }
        // 这里跳过已经重复的数据
        i = i + this.tableData[i].rowspan - 1;
      }

    },
    // 渲染表格头，
    getChartTitle() {
      var chartTable = this.tableData;
      // 准备日期，为了防止多次赋值属性，导致计算属性重新计算，决定只赋值一次
      var StartDate = new Date(this.queryParams.startTime);
      var EndDate = new Date(this.queryParams.endTime);
      for (var i = 0; i < chartTable.length; i++) {
        var days = this.GetNumberOfDays(StartDate, EndDate) // 计算工期
        this.tableData[i].days = days + 1 // 加一是因为没算结算当天
        // 记录时间戳
        this.tableData[i].beginTimeStamp = this.getTimeStamp(StartDate)
        this.tableData[i].endTimeStamp = this.getTimeStamp(EndDate)

      }
      this.minDay = StartDate
      this.maxDay = EndDate

      this.getYearArr()

    },

    // 获取需要的格式的年月日信息
    getYearArr() {

      // 获取需要格式的年月信息
      let yearArr = []; // 存年
      let allMonthsArr = []; // 存月

      let minYear = new Date(this.minDay).getFullYear();
      let maxYear = new Date(this.maxDay).getFullYear();

      // 保存年
      if (minYear === maxYear) {
        yearArr.push({
          year: minYear + "",
          months: [],        // 放月的数组
          days: []
        })
      } else {
        for (let i = minYear; i <= maxYear; i++) {
          yearArr.push({
            year: i + "",
            months: [],        // 放月的数组
            days: []
          })
        }
      }
      // 保存月
      for (let i = 0; i < yearArr.length; i++) {
        let minMonth = 1
        if (i === 0) {
          minMonth = new Date(this.minDay).getMonth() + 1;
        }
        if (yearArr.length > 1) {
          if (yearArr.length - 1 === i) {
            let maxMonth = new Date(this.maxDay).getMonth() + 1;
            let _maxDay = new Date(this.maxDay).getDate() // 最大日期 天数
            let j = 1
            while (j <= maxMonth) {
              let monthsDays = this.getLastDay(yearArr[i].year, j); // 获取月份一共有多少天
              let timestampstr = this.getTimeStamp(yearArr[i].year + "-" + (j > 9 ? j : '0' + j) + "-" + monthsDays)
              // 如果显示月|天 才用记录天
              if (j === maxMonth) {
                monthsDays = _maxDay
              }
              let daysArr = []; // 存天
              for (let k = 1; k <= monthsDays; k++) {
                timestampstr = this.getTimeStamp(yearArr[i].year + "-" + (j > 9 ? j : '0' + j) + "-" + (k > 9 ? k : '0' + k))

                const timestr = this.parseTime(new Date(timestampstr), '{y}{m}{d}')
                const res = festival.day(Number(timestr))

                daysArr.push({
                  day: k + "",
                  week: "周" + "日一二三四五六".charAt(new Date(timestampstr).getDay()),
                  timestamp: timestampstr,
                  holidayRes: res
                });
              }
              allMonthsArr.push({str: yearArr[i].year + "年" + j + "月", daysArr: daysArr})
              j++
            }
          } else {
            if (i === 0) {
              let j = minMonth
              let _minDay = new Date(this.minDay).getDate() // 最小日期 天数

              while (j <= 12) {
                let monthsDays = this.getLastDay(yearArr[i].year, j); // 获取月份一共有多少天
                let timestampstr = this.getTimeStamp(yearArr[i].year + "-" + (j > 9 ? j : '0' + j) + "-" + monthsDays)
                let daysArr = []; // 存天
                for (let k = 1; k <= monthsDays; k++) {
                  // 如果开始月，就不从1日开始，而是从最开始的日期那天开始算起
                  if (k === 1 && j === minMonth) {
                    k = _minDay
                  }
                  timestampstr = this.getTimeStamp(yearArr[i].year + "-" + (j > 9 ? j : '0' + j) + "-" + (k > 9 ? k : '0' + k))

                  const timestr = this.parseTime(new Date(timestampstr), '{y}{m}{d}')
                  const res = festival.day(Number(timestr))

                  daysArr.push({
                    day: k + "",
                    week: "周" + "日一二三四五六".charAt(new Date(timestampstr).getDay()),
                    timestamp: timestampstr,
                    holidayRes: res
                  });
                }
                allMonthsArr.push({str: yearArr[i].year + "年" + j + "月", daysArr: daysArr})
                j++
              }
            } else {
              let j = 1
              while (j <= 12) {
                let monthsDays = this.getLastDay(yearArr[i].year, j); // 获取月份一共有多少天
                let timestampstr = this.getTimeStamp(yearArr[i].year + "-" + (j > 9 ? j : '0' + j) + "-" + monthsDays)

                let daysArr = []; // 存天
                for (let k = 1; k <= monthsDays; k++) {
                  timestampstr = this.getTimeStamp(yearArr[i].year + "-" + (j > 9 ? j : '0' + j) + "-" + (k > 9 ? k : '0' + k))

                  const timestr = this.parseTime(new Date(timestampstr), '{y}{m}{d}')
                  const res = festival.day(Number(timestr))

                  daysArr.push({
                    day: k + "",
                    week: "周" + "日一二三四五六".charAt(new Date(timestampstr).getDay()),
                    timestamp: timestampstr,
                    holidayRes: res
                  });
                  allMonthsArr.push({str: yearArr[i].year + "年" + j + "月", daysArr: daysArr})
                }
                j++
              }
            }

          }
        } else {
          // 如果只有一年那么没有必要判断是否记录天
          let maxMonth = new Date(this.maxDay).getMonth() + 1;
          let _minMonth = new Date(this.minDay).getMonth() + 1;
          let _minDay = new Date(this.minDay).getDate() // 最小日期 天数
          let _maxDay = new Date(this.maxDay).getDate() // 最大日期 天数

          console.log("-------------------")
          console.log(_minMonth, maxMonth)

          while (_minMonth <= maxMonth) {
            let monthsDays = this.getLastDay(yearArr[i].year, _minMonth); // 获取月份一共有多少天
            let timestampstr = this.getTimeStamp(yearArr[i].year + "-" + (_minMonth > 9 ? _minMonth : '0' + _minMonth) + "-" + monthsDays)
            // 如果结束月，不是到本月最后一天，而是截止到最
            if (_minMonth === maxMonth) {
              monthsDays = _maxDay
            }
            let daysArr = []; // 存天
            for (let k = 1; k <= monthsDays; k++) {
              // 如果开始月，就不从1日开始，而是从最开始的日期那天开始算起
              if (k === 1 && _minMonth === minMonth) {
                k = _minDay
              }
              timestampstr = this.getTimeStamp(yearArr[i].year + "-" + (_minMonth > 9 ? _minMonth : '0' + _minMonth) + "-" + (k > 9 ? k : '0' + k))

              const timestr = this.parseTime(new Date(timestampstr), '{y}{m}{d}')
              const res = festival.day(Number(timestr))

              daysArr.push({
                day: k + "",
                week: "周" + "日一二三四五六".charAt(new Date(timestampstr).getDay()),
                timestamp: timestampstr,
                holidayRes: res
              });
            }
            allMonthsArr.push({str: yearArr[i].year + "年" + _minMonth + "月", daysArr: daysArr})
            _minMonth++
          }
        }
      }
      this.showMonths = allMonthsArr

      console.log('this.showMonths=>', this.showMonths)

      this.calcHeight()
    },

    // 获取月的最后一天
    getLastDay(myyear, mymonth) {
      var new_date = new Date(myyear, mymonth, 0);
      return new_date.getDate();
    },

    // 获得天数
    GetNumberOfDays(date1, date2) {
      //date1：开始日期，date2结束日期
      var a1 = Date.parse(new Date(date1));
      var a2 = Date.parse(new Date(date2));
      var day = parseInt((a2 - a1) / 86400000);//核心：时间戳相减，然后除以天数
      return day
    },
    // 时间比较 true 比大
    compareDate(dateTime1, dateTime2, condition = true) {
      var formatDate1 = new Date(dateTime1)
      var formatDate2 = new Date(dateTime2)
      if (formatDate1 >= formatDate2) {
        return condition ? dateTime1 : dateTime2
      } else {
        return condition ? dateTime2 : dateTime1
      }
    },
    getTimeStamp(val) {
      return new Date(val).getTime()
    },
    selectTime() {
      document.querySelector('.mSelectTime .el-input__inner').focus();
    },

    changTime(val) {
      // this.queryParams.startTime = this.dateVal[0]
      // this.queryParams.endTime = this.dateVal[1]

      switch (val) {
        case 0:
          this.queryParams.startTime = this.dateVal[0]
          this.queryParams.endTime = this.dateVal[1]
          // this.queryParams.endTime = this.parseTime(new Date(this.queryParams.startTime).getTime() + 30 * 24 * 60 * 60 * 1000, '{y}-{m}-{d}')
          break;
        case 1:
          //上两周开始14天
          this.queryParams.startTime = this.parseTime(new Date(this.queryParams.startTime).getTime() - 14 * 24 * 60 * 60 * 1000, '{y}-{m}-{d}')
          this.queryParams.endTime = this.parseTime(new Date(this.queryParams.endTime).getTime() - 14 * 24 * 60 * 60 * 1000, '{y}-{m}-{d}')

          break;
        case 2:
          //今天起14天
          this.queryParams.startTime = this.parseTime(new Date(), '{y}-{m}-{d}')
          this.queryParams.endTime = this.parseTime(new Date().getTime() + 14 * 24 * 60 * 60 * 1000, '{y}-{m}-{d}')
          break;
        case 3:
          //下两周起14天
          this.queryParams.startTime = this.parseTime(new Date(this.queryParams.startTime).getTime() + 14 * 24 * 60 * 60 * 1000, '{y}-{m}-{d}')
          this.queryParams.endTime = this.parseTime(new Date(this.queryParams.endTime).getTime() + 14 * 24 * 60 * 60 * 1000, '{y}-{m}-{d}')
          break;
      }
      this.handleQuery()
      this.getChartTitle() // 渲染的信息
    },
  }
};
</script>
<style scoped>
.paiban {
  background-color: #f1f4f7;
  padding: 0;
}

.cell-btn {
  width: 100%;
  height: 100%;
  padding: 0;
}

/* 边框宽度 */
/deep/ .barchart .el-table--border td, .barchart .el-table--border th {
  border-width: 1px;
}

/* 单元格padding */
/deep/ .barchart .el-table--border th:first-child .cell, .el-table--border td:first-child .cell {
  padding: 0px !important;
}

/deep/ .el-table .cell {
  padding: 0px !important;
}

/deep/ .el-table .el-table__cell {
  padding: 0px !important;
  height: 45px !important;
}

/* 单元格高度 */
/deep/ .barchart .left .el-table--medium th, .barchart .el-table--medium td {
  padding: 0px 0px !important;
  height: 30px !important;
}


/* 单元格高度 */
/deep/ .barchart .right .el-table--medium .is-leaf, .barchart .el-table--medium td {
  padding: 0px 0px !important;
  height: 67px !important;
}

.barchart .right .el-table__header-wrapper .el-row {
  line-height: 15px !important;
}


/deep/ .left .el-input__inner {
  background: transparent;
  border: none;
}

/deep/ .el-input__icon.el-range__icon.el-icon-date {
  display: none;
}

/deep/ .el-date-editor .el-range-input {
  background: transparent;
  color: #333;
  font-size: 14px;
}

/deep/ .el-date-editor input:first-of-type {
  text-align: right !important;
}

/deep/ .el-date-editor input:last-of-type {
  text-align: left !important;
}

/deep/ .el-date-editor input::-webkit-input-placeholder {
  color: #333;
}

/deep/ .barchart .orderstate1 {
  background: #FF9F24;
  height: 25px;
}

/deep/ .barchart .orderstate2 {
  background: #369AFE;
  height: 25px;
}

/deep/ .barchart .orderstate3 {
  background: #99B4CD;
  height: 25px;
}

.ordertext1{
  color: #FF9F24;
}
.ordertext2{
  color: #369AFE;
}
.ordertext3{
  color: #99B4CD;
}

/deep/ .barchart .scheduled {
  background: #FF9F24;
  height: 25px;
  /*z-index: 2;*/
  /*position: absolute;*/
  /*top: 10px;*/
  /*left: 0;*/
}

/deep/ .barchart .inUse {
  background: #369AFE;
  height: 25px;
  /*z-index: 2;*/
  /*position: absolute;*/
  /*top: 10px;*/
  /*left: 0;*/
}

/deep/ .barchart .lend {
  background: #23BCCA;
  height: 25px;
  /*z-index: 2;*/
  /*position: absolute;*/
  /*top: 10px;*/
  /*left: 0;*/
}

/deep/ .barchart .callOut {
  background: #99B4CD;
  height: 25px;
  /*z-index: 2;*/
  /*position: absolute;*/
  /*top: 10px;*/
  /*left: 0;*/
}

/deep/ .barchart .free {
  background: #FFFFFF;
  height: 43px;
}

.noplan {
  font-size: 14px;
  color: #333;
  margin: -10px 0 10px;
}

/* 布局盒子 这样使得固定列与右侧图表分开 */
.barchart {
  width: 100%;
  display: flex;
}

/deep/ .barchart .el-table th {
  background: #F5F7FA;
}

.barchart .left {
  width: 22%;
}

/deep/ .left .el-table__body-wrapper {
  overflow-y: hidden !important;
}

/deep/ .left th.el-table__cell.gutter {
  width: 0px !important;
  display: none;
}

/deep/ .left .el-table__body {
  width: 100% !important;
}

.barchart .right {
  width: 78%;
}

.right .el-button {
  border: none !important;
  border-radius: 0 !important;
}

.line {
  margin: 2px 4px 0 0;
  width: 10px;
  height: 10px;
  border-radius: 5px;
}


.car_no {
  color: white;
  letter-spacing: 1px;
  font-weight: bold;
  background-color: #1e68bb;
  border-radius: 3px;
  border: white 0.5px solid;
  text-align: center;
  padding: 2px 5px;
  display: inline-block;
  box-shadow: 0 0 1px 2px #1e68bb;
}

/deep/ .custom_card .el-row {
  margin-right: 0;
}

.car_no_new {
  color: #000000;
  letter-spacing: 1px;
  font-weight: bold;
  background-image: linear-gradient(to top, #12c53e, #ffffff);
  border-radius: 3px;
  border: #000000 0.5px solid;
  text-align: center;
  padding: 2px 5px;
  display: inline-block;
  box-shadow: 0 0 1px 2px #85c085;
}

/deep/ .label-class {
  color: #d93131 !important;
}

/deep/ .el-radio-box .el-radio-button--medium .el-radio-button__inner {
  padding: 10px !important;
}

.custom_card_0 {
  padding: 10px;
}

.custom_card {
  padding: 10px;
}

.dian {
  user-select: none;
}

/deep/ .el-dialog__body {
  padding: 10px 20px 20px;
}

.member-label {
  display: flex;
  justify-content: flex-end;
}

.member-label span {
  background: #0fb3e8;
  color: #fff;
  border-radius: 4px;
  padding: 3px 5px;
}
</style>
